<template>
  <div class="FrontPageMain">
    <!--    我的医生-->
    <div class="myDoctor">
      <!--      用药提醒部分-->
      <div v-show="MedicationShow">
        <p class="title">用药提醒</p>
        <div class="Medication" @touchmove.stop>
          <div class="medication-row"><span>第一周</span><span>2018.12.1~2018.12.7</span></div>
          <div class="medication-row"><span>德巴金缓释片</span><span>100mg/日</span></div>
          <div class="medication-row"><span>得理多</span><span>20mg/日</span></div>
          <div class="medicationBtn">
            <van-button type="info" size="small">今日已服用</van-button>
          </div>
        </div>
      </div>
      <!--    我的医生-->
      <div>
        <p class="title">我的医生</p>
        <div v-show="noDoctor" class="doctorShow">暂时还没有医生</div>
        <div v-show="doctorShow" class="myDocInfo">
          <div class="myDocInfo-row1">
            <van-image class="doctorImg" round width="3rem" height="3rem" src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
            <div>
              <div><span>{{
                  myDoctorMsg.dname ? myDoctorMsg.dname : '李小爱'
                }}</span><span>{{ myDoctorMsg.djob ? myDoctorMsg.djob : '主治医生' }}</span></div>
              <div><span>关联时间:{{ new Date().toLocaleDateString() }}</span></div>
            </div>
          </div>
          <div class="myDocInfo-row2"><span>从业经验:{{
              myDoctorMsg.dexperience ? myDoctorMsg.dexperience : "从业15年"
            }}</span></div>
          <div class="myDocInfo-row3"><span>所属医院:{{ myDoctorMsg.hname ? myDoctorMsg.hname : '成都市癫痫医院' }}</span></div>
          <van-tabs v-model="active" color="#1989FA" title-active-color="#1989FA">
            <van-tab title="诊疗活动">
              <div v-for="item in clinicActivityList" :key="item.id">
                <div class="clinicActivity">
                  <div>
                    <div><span>{{ item.time }}</span><span>{{ item.type }}</span></div>
                    <div class="address"><span>地址:</span><span>{{ item.address }}</span></div>
                  </div>
                  <div>
                    <template v-if="item.state==1"><span :style="isBlue" @click="signUpBtn(item)">已报名</span></template>
                    <template v-if="item.state==2"><span :style="isGreen" @click="signUpingBtn(item)">报名中</span>
                    </template>
                    <template v-if="item.state==0"><span :style="isRed">已结束</span></template>
                    <template v-if="item.state==3"><span :style="isRed">名额已满</span></template>
                  </div>
                </div>
                <van-divider/>
              </div>
            </van-tab>
            <van-tab title="患教活动">
              <div v-for="item in patientActivitiesList" :key="item.id">
                <div class="clinicActivity">
                  <div>
                    <div class="title"><span>{{ item.a_theme }}</span></div>
                    <div>
                      <span>报名时间:{{ item.a_regTime |formatDate }}-{{ item.a_overTime |formatDate }}</span>
                    </div>
                  </div>
                  <div :style="isGreen">报名中</div>
                </div>
                <van-divider/>
              </div>
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'
import {formatDate} from "@/utils/date";

export default {
  name: "FrontPageMain",
  mounted() {
    //医生列表
    this.getDoctorList();
    //  患教活动
    this.patientActList();

  },
  components: {},
  computed: {
    ...mapGetters(['clinicActivityList', 'loginUserInfo', 'isBindDoctor', 'userPhone'])
  },
  data() {
    return {
      isRed: {'color': 'red'},
      isGreen: {'color': '#1af11a'},
      isBlue: {'color': 'blue'},
      // doctorList: [1],
      myDoctorMsg: '',
      noDoctor: false,
      doctorShow: false,
      MedicationShow: true,
      active: 2,
      patientActivitiesList: ''//患教活动
    }
  },
  methods: {
    //患教活动
    patientActList() {
      console.log('用户信息=' + this.loginUserInfo);
      console.log('用户电话=' + this.userPhone);
      this.$service.frontPageService.patientActivities(this.userPhone).then(res => {
        this.patientActivitiesList = res.data.data;
      })
    },
    //已报名
    signUpBtn(item) {
      this.$dialog.confirm({
        title: '取消报名',
        message: '您是否取消本次报名?',
      })
          .then(() => {
            item.state = 2
          })
          .catch(() => {
            // on cancel
          });
    },
    //报名中
    signUpingBtn(item) {
      this.$dialog.confirm({
        title: '是否预约本次诊疗活动',
        message: `<span>地点：${item.address}</span>
                  <span>时间：${item.time}</span>`,
      })
          .then(() => {
            item.state = 1
          })
          .catch(() => {
            // on cancel
          });
    },
    getDoctorList() {
      console.log('绑定医生=' + this.isBindDoctor)
      if (this.isBindDoctor <= '0') {
        this.noDoctor = true;
        this.MedicationShow = false;
      } else {
        this.MedicationShow = true;
        this.doctorShow = true;
        this.noDoctor = false;
        this.$service.frontPageService.myDoctorMsg(this.isBindDoctor).then(res => {
          this.myDoctorMsg = res.data.data[0];
          console.log('我的医生的信息=' + this.myDoctorMsg);
        })
      }
    },
  },
  filters: {
    //时间戳转换为日期格式
    formatDate(time) {
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd");
    },
  },
}
</script>

<style scoped lang="less">
.FrontPageMain {
  padding: 0 0.5rem;
  background-color: #F2F2F2;

  .title {
    margin: 0.4rem 0
  }

  .myDoctor {
    padding-top: 5px;
    font-size: 14px;

    //用药提醒
    .Medication {
      background-color: white;
      padding: 0.5rem;
      //font-size: 0.3rem;

      .medication-row {
        display: flex;
        justify-content: space-between;
        margin: 5px 0;
      }

      //是否服药按钮
      .medicationBtn {
        display: flex;
        justify-content: center;

        .van-button {
          border-radius: 5px;
        }
      }
    }

    //我的医生
    .doctorShow {
      background-color: white;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }

    //我的医生的信息
    .myDocInfo {
      background-color: white;
      display: flex;
      flex-direction: column;
      //font-size: 0.3rem;
      padding: 0 0.5rem;

      span {
        margin-right: 10px;
      }

      .myDocInfo-row1 {
        display: flex;

        .doctorImg {
          margin-right: 0.5rem;
        }

        div > div {
          margin-bottom: 0.5rem;
        }
      }

      .myDocInfo-row1, .myDocInfo-row2, .myDocInfo-row3, .address {
        margin-top: 0.5rem;
      }
    }

    //  诊疗活动
    .clinicActivity {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}

</style>
